<template>
	<div class="content">
		<h2><i class="iconfont icon-suoyouhuopin-copy"></i>所有活动</h2>
		<div class="content-bg">
			<!--根据不同条件进行搜索-->
			<div class="search-list">
				<div class="search-list-item">
					<div class="keyword-tag" style="color:#f60;">活动位置(顶部活动，中部活动)</div>
					<el-select v-model="params.activity_type" @change="selectActiveLoc">
						<el-option label="全部" :value="''"></el-option>
						<el-option label="顶部活动" :value="1"></el-option>
						<el-option label="中部活动" :value="2"></el-option>
					</el-select>
				</div>
				<div class="ads-id search-list-item">
					<el-input placeholder="活动名称" v-model="params.active_name" clearable></el-input>
				</div>
				<div class="goods-num search-list-item">
				    <el-date-picker
						@change="handleSelectTimes"
					    v-model="times"
					    type="daterange"
					    range-separator="至"
					    start-placeholder="开始日期"
					    end-placeholder="结束日期">
				  	</el-date-picker>
				</div>
				<div class="goods-search-btn">
					<el-button type="success"  icon="el-icon-search" @click="searchActive">搜索</el-button>
					<el-button type="success"  icon="el-icon-add" @click="addActive">添加</el-button>
				</div>
			</div>
	
			<!--商品显示详情-->
			<div class="content-table" v-loading="loading" >
				<el-table :data="activities" strip height="450">
					<el-table-column label="活动名称" prop="activity_title" width="300" align="center">
						<template slot-scope="scope">
							<div class="goods-name">
								<img :src="scope.row.mainimg.url" alt="" v-if="scope.row.mainimg"/>
								<span class="goods-name-des">{{scope.row.activity_title}}</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="活动开始日期" prop="start_time">
						<template slot-scope="scope">
							<span>{{ scope.row.start_time | formatTime }}</span>
						</template>
					</el-table-column>
					<el-table-column label="活动结束日期" prop="end_time">
						<template slot-scope="scope">
							<span>{{ scope.row.end_time | formatTime }}</span>
						</template>
					</el-table-column>
					<el-table-column label="活动位置" width="200" align="center">
						<template slot-scope="scope">
							<el-tag v-if="scope.row.activity_type === 1" type="success">顶部活动</el-tag>
							<el-tag v-else-if="scope.row.activity_type === 2">中部活动</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="250" align="center">
						<template slot-scope="scope">
							<el-button size="mini" type="warning" @click="modifyActive(scope.row.activity_id)">修改</el-button>
							<el-button size="mini" type="danger" @click="delActive(scope.row.activity_id)">删除</el-button>
							<el-button size="mini"  @click="showDetail(scope.row.activity_id)">详情</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<el-pagination 
			@current-change="handleCurrentChange" 
			background layout="total, prev, pager, next" 
			:total="totalNum" class="fr"></el-pagination>
	</div>
</template>

<script>
	export default {
		created() {
			//======================================//
			this.$store.commit("saveGoods/clear");//进入所有活动页面的时候清除store里面的数据
			//======================================//
			this.fetchAllActive();
		},
		data() {
			return {
				params: {
					page: 1,			//当前页数
					rows: 10,
					start_time: "",
					end_time: "",
					activity_type: "", //1：顶部活动 2：中部活动列表
					need_mainimg: true,
					need_imgs: true,
					active_name: "",  //活动名称
				},
				times: "",			//条件选择里面的时间
				loading: true,		//加载小圆圈
				totalNum: 0,		//活动总数
				activities: null 	//所有活动
			}
		},
		methods: {
			handleCurrentChange(pages) {
				this.params.page = pages;
				this.fetchAllActive();
			},
			//选择活动位置的时候触发
			selectActiveLoc() {
				this.fetchAllActive();
			},
			//选择时间时候触发
			handleSelectTimes(val) {
				if (this.times) {
					this.params.start_time = this.times[0].getTime();
					this.params.end_time = this.times[1].getTime();
				}else {
					this.params.start_time = "";
					this.params.end_time = "";
				}
				this.fetchAllActive();

			},
			//根据条件获得活动数据
			searchActive() {
				this.fetchAllActive();
			},
			//从后台获取活动数据
			fetchAllActive() {
				this.loading = true;
				//请求url
				var url = `${this.url}/activity/activity_man_get_list.action`;
				var params = this.params;
				//发送请求 
				this.$http.get(url, { params }).then((res) => {
					if( res.data.success ) {
						this.loading = false;
						this.activities = res.data.result.rows;
						this.totalNum = res.data.result.total;
					}else {
						this.$message({
							type: "error",
							message: res.data.result.errmsg
						});
					}
				});
			},
			// 添加活动
			addActive: function() {
				this.$router.push("/admin/add_active");
			},
			//修改活动
			modifyActive(id) {
				this.$router.push({
					name: "add_active",
					query: { id }
				});
			},
			//删除活动
			delActive(id) {
		        this.$confirm('此操作将永久删除该活动, 是否继续?', '提示', {
		            confirmButtonText: '确定',
		            cancelButtonText: '取消',
		            type: 'warning'
		        }).then(() => {
					this.loading = true;
					var url = `${this.url}/activity/activity_delete.action`;
					var params = {
						activity_id: id
					};
					this.$http.get(url, { params }).then((res) => {
						if( res.data.success ) {
							this.loading = false;
							this.$message({
								type: "success",
								message: "删除成功"
							});
							this.fetchAllActive();
						}else {
							this.$message({
								type: "error",
								message: res.data.result.errmsg
							});
						}
					});
					
		        }).catch(() => {});
			},
			showDetail() {
				
			}
		}

	}
</script>

<style scoped>
	.content {
		position: relative;
		width: 87%;
		transition: width .5s;
	}
	
	.content>h2 {
		background: #f9f9f9;
		border-bottom: 1px solid #ccc;
		padding: 10px 0;
		font-weight: normal;
		text-indent: 3rem;
		font-size: 1.3rem;
		color: #555;
	}
	
	.content h2 i {
		margin-right: 1rem;
	}
	
	.content-bg {
		background: #f2f2f2;
		padding: 2rem;
	}
	
	.content_ct {
		background: #fff;
		padding: 2rem;
	}
	
	.content-table {

	}
	
	.search-list {
		padding-bottom: 2rem;
		min-height: 90px;
	}
	
	.search-list>div {
		display: inline-block;
		/*vertical-align: middle;*/
	}
	
	.search-list-item {
		/*width: 100px;*/
	}
	
	.goods-del {
		position: relative;
		left: 470px;
	}
	
	.goods-name>* {
		vertical-align: middle;
	}
	
	.goods-name>img {
		width: 80px;
		height: 80px;
	}
	
	.goods-name-des {
		max-width: 200px;
		display: inline-block;
		text-align: left;
	}
	
	.keyword-tag,
	.classify-tag {
		font-size: 15px;
		color: #555;
		margin-bottom: 2px;
	}
</style>